<template>
  <div class="histroy-container">
    <el-button class="add-btn" size="small" type="primary" @click="uploadPage"
      >+ 新建测试点生成</el-button
    >
    <ul class="history-list">
      <li :title="item.title" v-for="item in histroyList" :key="item.id">
        <span @click="handleClickCurrentHistory(item, item.id)">
          {{ item.title.slice(0, 8) }}
          <span v-if="item.title.length > 8">...</span>
        </span>

        <i @click="del(item)" style="float: right; margin-top: 14px" class="el-icon-delete"></i>
      </li>
    </ul>
  </div>
</template>
<script>
import { getData, postData } from '@/service/getData';
// 获取历史对话
// 选择历史对话
export default {
  data() {
    return {
      histroyList: [],
    };
  },
  methods: {
    uploadPage() {
      // 刷新页面
      this.$router.go(0);
    },
    del(obj) {
      postData(
        'api/qa/chat_delete/',
        {
          chat_id: obj.id,
        },
        'post',
        {
          headers: {
            'Content-Type': 'application/json;charset=UTF-8',
          },
        },
      ).then((res) => {
        this.$message.success('操作成功');
        this.getHistory();
        // 取前十项

        // 递归遍历数组，给每个对象添加label属性
      });
    },
    getHistory() {
      getData('api/qa/chat_list/?chat_type=test_point_gen').then((res) => {
        this.histroyList = res.slice(0, 10);
        // 取前十项

        // 递归遍历数组，给每个对象添加label属性
      });
    },
    handleClickCurrentHistory(obj, id) {
      this.$emit('handle-history', obj, id);
    },
  },
  mounted() {
    this.getHistory();
  },
};
</script>

<style lang="scss" scoped>
.history-list {
  list-style: none;
  padding: 0;
  margin: 0;
  height: 300px;
  overflow: auto;
  text-align: left;
  li {
    font-size: 14px;
    line-height: 40px;
    margin: 10px 0;
    border-radius: 10px;
    padding: 0 10px;
    cursor: pointer;
    background: #f9fbff;
  }
  li:hover {
    color: #0b51df;
  }
}
.histroy-container {
  width: 140px;
  background: #fff;
  padding: 10px 10px;
  text-align: center;
  position: absolute;
  left: 160px;
  z-index: 100;
  top: 200px;
  border: 1px solid #4d6bfe;
  left: 0px;
}
.add-btn {
  width: 100%;
  margin-bottom: 10px;
}
</style>
